សេចក្តីផ្តើម
ចាប់ផ្តើមជាមួយ Bootstrap ដែលជាក្របខ័ណ្ឌដ៏ពេញនិយមបំផុតរបស់ពិភពលោកសម្រាប់ការកសាងគេហទំព័រដែលឆ្លើយតប គេហទំព័រទូរសព្ទដៃដំបូងជាមួយ jsDelivr និងទំព័រចាប់ផ្តើមគំរូ។
ការចាប់ផ្តើមរហ័ស
កំពុងរកមើលដើម្បីបន្ថែម Bootstrap យ៉ាងឆាប់រហ័សទៅគម្រោងរបស់អ្នក? ប្រើ jsDelivr ដែលជាប្រភពបើកចំហឥតគិតថ្លៃ CDN ។ ប្រើកម្មវិធីគ្រប់គ្រងកញ្ចប់ ឬត្រូវការទាញយកឯកសារប្រភព? ទៅកាន់ទំព័រទាញយក ។
CSS
ចម្លង-បិទភ្ជាប់សន្លឹករចនាប័ទ្ម <link>
ទៅក្នុងរបស់អ្នក <head>
មុនសន្លឹករចនាប័ទ្មផ្សេងទៀតទាំងអស់ដើម្បីផ្ទុក CSS របស់យើង។
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
ច.ស
សមាសធាតុជាច្រើនរបស់យើងទាមទារការប្រើប្រាស់ JavaScript ដើម្បីដំណើរការ។ ជាពិសេស ពួកគេត្រូវការកម្មវិធីជំនួយ JavaScript និង Popper ផ្ទាល់ខ្លួនរបស់យើង ។ ដាក់ មួយឃ្លាខាងក្រោម <script>
នៅ ជិតចុងបញ្ចប់នៃទំព័ររបស់អ្នក នៅពីមុខ </body>
ស្លាកបិទ ដើម្បីបើកពួកវា។
បាច់
រួមបញ្ចូលរាល់កម្មវិធីជំនួយ Bootstrap JavaScript និងភាពអាស្រ័យជាមួយនឹងកញ្ចប់មួយក្នុងចំណោមកញ្ចប់ទាំងពីររបស់យើង។ ទាំងពីរ bootstrap.bundle.js
និង bootstrap.bundle.min.js
រួមបញ្ចូល Popper សម្រាប់ព័ត៌មានជំនួយ និងការលេចឡើងរបស់យើង។ សម្រាប់ព័ត៌មានបន្ថែមអំពីអ្វីដែលរួមបញ្ចូលនៅក្នុង Bootstrap សូមមើល ផ្នែក មាតិកា របស់យើង ។
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
ដាច់ដោយឡែក
ប្រសិនបើអ្នកសម្រេចចិត្តទៅជាមួយដំណោះស្រាយស្គ្រីបដាច់ដោយឡែក Popper ត្រូវតែមកមុន (ប្រសិនបើអ្នកកំពុងប្រើព័ត៌មានជំនួយ ឬ popovers) ហើយបន្ទាប់មកកម្មវិធីជំនួយ JavaScript របស់យើង។
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
ម៉ូឌុល
ប្រសិនបើអ្នកប្រើ <script type="module">
សូមយោងទៅលើ ការប្រើប្រាស់ Bootstrap របស់យើងជាផ្នែកម៉ូឌុល ។
សមាសធាតុ
ចង់ដឹងថាតើសមាសធាតុមួយណាដែលត្រូវការ JavaScript និង Popper របស់យើងយ៉ាងច្បាស់? ចុចលើតំណបង្ហាញសមាសធាតុខាងក្រោម។ ប្រសិនបើអ្នកមិនប្រាកដអំពីរចនាសម្ព័ន្ធទំព័រទូទៅទេ សូមបន្តអានគំរូទំព័រគំរូ។
បង្ហាញសមាសធាតុដែលទាមទារ JavaScript
- ការជូនដំណឹងសម្រាប់ការបដិសេធ
- ប៊ូតុងសម្រាប់បិទ/បើកស្ថានភាព និងមុខងារប្រអប់ធីក/វិទ្យុ
- Carousel សម្រាប់ឥរិយាបថស្លាយ ការគ្រប់���្រង និងសូចនាករទាំងអស់។
- បង្រួមសម្រាប់បិទបើកលទ្ធភាពមើលឃើញនៃមាតិកា
- ទម្លាក់ចុះសម្រាប់ការបង្ហាញ និងទីតាំង (ក៏ទាមទារ Popper ផងដែរ )
- ម៉ូឌុលសម្រាប់ការបង្ហាញ ទីតាំង និងឥរិយាបថរមូរ
- Navbar សម្រាប់ពង្រីកកម្មវិធីជំនួយការដួលរលំរបស់យើង ដើម្បីអនុវត្តឥរិយាបថឆ្លើយតប
- Offcanvases សម្រាប់បង្ហាញ ទីតាំង និងឥរិយាបថរមូរ
- Toasts សម្រាប់បង្ហាញ និងច្រានចោល
- ព័ត៌មានជំនួយ និងផ្ទាំងព័ត៌មានសម្រាប់បង្ហាញ និងកំណត់ទីតាំង (ក៏ទាមទារ Popper ផងដែរ )
- Scrollspy សម្រាប់ឥរិយាបថរមូរ និងបច្ចុប្បន្នភាពការរុករក
គំរូចាប់ផ្តើម
ត្រូវប្រាកដថាមានទំព័ររបស់អ្នករៀបចំជាមួយនឹងការរចនា និងស្តង់ដារអភិវឌ្ឍន៍ចុងក្រោយបំផុត។ នោះមានន័យថាការប្រើប្រាស់ឯកសារ HTML5 និងរួមទាំងស្លាកមេតានៃទិដ្ឋភាពច្រកសម្រាប់ឥរិយាបថឆ្លើយតបត្រឹមត្រូវ។ ដាក់វាទាំងអស់គ្នា ហើយទំព័ររបស់អ្នកគួរតែមើលទៅដូចនេះ៖
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
-->
</body>
</html>
សម្រាប់ជំហានបន្ទាប់ សូមចូលទៅកាន់ ឯកសារប្លង់ ឬ ឧទាហរណ៍ផ្លូវការរបស់យើង ដើម្បីចាប់ផ្តើមដាក់ចេញនូវខ្លឹមសារ និងសមាសធាតុនៃគេហទំព័ររបស់អ្នក។
សកលសំខាន់ៗ
Bootstrap ប្រើប្រាស់រចនាប័ទ្ម និងការកំណត់ជាសកលសំខាន់ៗមួយចំនួនដែលអ្នកនឹងត្រូវដឹងនៅពេលប្រើវា ដែលទាំងអស់នេះស្ទើរតែទាំងស្រុងឆ្ពោះទៅរកការធ្វើ ឱ្យមាន លក្ខណៈធម្មតា នៃរចនាប័ទ្មកម្មវិធីរុករកតាមអ៊ីនធឺណិត។ តោះចូលមុជ។
ប្រភេទឯកសារ HTML5
Bootstrap ទាមទារការប្រើប្រាស់ឯកសារ HTML5 ។ បើគ្មានវាទេ អ្នកនឹងឃើញរចនាប័ទ្មមិនពេញលេញដែលគួរឱ្យអស់សំណើច ប៉ុន្តែការរួមបញ្ចូលវាមិនគួរបង្កឱ្យមានការរំខានគួរឱ្យកត់សម្គាល់ណាមួយឡើយ។
<!doctype html>
<html lang="en">
...
</html>
ស្លាកមេតាដែលឆ្លើយតប
Bootstrap ត្រូវបានបង្កើត ទូរសព្ទដៃជាមុន សិន ដែលជាយុទ្ធសាស្ត្រមួយដែលយើងបង្កើនប្រសិទ្ធភាពកូដសម្រាប់ឧបករណ៍ចល័តជាមុនសិន ហើយបន្ទាប់មកពង្រីកសមាសភាគតាមការចាំបាច់ដោយប្រើសំណួរមេឌៀ CSS ។ ដើម្បីធានាបាននូវការបង្ហាញត្រឹមត្រូវ និងការពង្រីកដោយប៉ះសម្រាប់ឧបករណ៍ទាំងអស់ សូម បន្ថែមស្លាកមេតានៃច្រកមើលដែលឆ្លើយតប ទៅរបស់អ្នក <head>
។
<meta name="viewport" content="width=device-width, initial-scale=1">
អ្នកអាចឃើញឧទាហរណ៍នៃសកម្មភាពនេះនៅក្នុង គំរូចាប់ផ្តើម ។
ទំហំប្រអប់
សម្រាប់ការកំណត់ទំហំត្រង់បន្ថែមទៀតនៅក្នុង CSS យើងប្តូរ box-sizing
តម្លៃសកលពី content-box
ទៅ border-box
. នេះធានាថា padding
មិនប៉ះពាល់ដល់ទទឹងដែលបានគណនាចុងក្រោយនៃធាតុមួយនោះទេ ប៉ុន្តែវាអាចបង្កបញ្ហាជាមួយកម្មវិធីភាគីទីបីមួយចំនួនដូចជា Google Maps និង Google Custom Search Engine ជាដើម។
ក្នុងឱកាសដ៏កម្រដែលអ្នកត្រូវបដិសេធវា សូមប្រើអ្វីមួយដូចតទៅ៖
.selector-for-some-widget {
box-sizing: content-box;
}
ជាមួយនឹងព័ត៌មានសង្ខេបខាងលើ ធាតុដែលបានដាក់ជាប់គ្នា—រួមទាំងខ្លឹមសារដែលបានបង្កើតតាមរយៈ ::before
និង ::after
—នឹងទទួលមរតកនូវអ្វីដែលបានបញ្ជាក់ box-sizing
សម្រាប់នោះ .selector-for-some-widget
។
ស្វែងយល់បន្ថែមអំពី គំរូប្រអប់ និងទំហំនៅ CSS Tricks ។
ចាប់ផ្ដើមឡើងវិញ
សម្រាប់ការធ្វើឱ្យប្រសើរឡើងនូវការបង្ហាញឆ្លងកម្មវិធីរុករកតាមអ៊ីនធឺណិត យើងប្រើការ ចាប់ផ្ដើម ឡើងវិញដើម្បីកែតម្រូវការមិនស៊ីសង្វាក់គ្នានៅទូទាំងកម្មវិធីរុករកតាមអ៊ីនធឺណិត និងឧបករណ៍ ខណៈពេលដែលផ្ដល់ការកំណត់ឡើងវិញដែលយល់ឃើញបន្តិចបន្តួចទៅធាតុ HTML ធម្មតា។
សហគមន៍
ទទួលបានព័ត៌មានថ្មីៗអំពីការអភិវឌ្ឍន៍ Bootstrap និងទាក់ទងសហគមន៍ជាមួយនឹងធនធានដ៏មានប្រយោជន៍ទាំងនេះ។
- អាន និងជាវទៅកាន់ ប្លុក Bootstrap ផ្លូវការ ។
- ជជែកជាមួយមិត្ត Bootstrappers ក្នុង IRC ។ នៅលើ
irc.libera.chat
ម៉ាស៊ីនមេ នៅក្នុង#bootstrap
ឆានែល។ - ជំនួយក្នុងការអនុវត្តអាចត្រូវបានរកឃើញនៅ Stack Overflow (ដាក់ស្លាក
bootstrap-5
)។ - អ្នកអភិវឌ្ឍន៍គួរតែប្រើពាក្យគន្លឹះ
bootstrap
នៅលើកញ្ចប់ដែលកែប្រែ ឬបន្ថែមមុខងាររបស់ Bootstrap នៅពេលចែកចាយតាមរយៈ npm ឬយន្តការចែកចាយស្រដៀងគ្នាសម្រាប់ការរកឃើញអតិបរមា។
អ្នកក៏អាចតាមដាន @getbootstrap នៅលើ Twitter សម្រាប់ការនិយាយដើម និងវីដេអូតន្ត្រីដ៏អស្ចារ្យបំផុត។